<!DOCTYPE html>
<html lang="zh-CN" color-mode=light>


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Nginx 难点攻克 - 树朾的开源技术分享</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate" />
  <meta name="keywords" content="开源, 分享">
  <meta name="description" content="汇聚各个时间段，关于Nginx的一些难点问题，他们掌握...">
  <meta name="author" content="scwang90">
  <link rel="icon" href="/images/icons/favicon.ico">
  
  
  
  
  

  
<link rel="stylesheet" href="/css/style.css">


  
    
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1445822_p6ry5n7lrr.css">

  

  
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">

  

  
    
      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css" name="highlight-style" mode="light">

      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/solarized-dark.min.css" name="highlight-style" mode="dark">

      
  

  <script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: false,
      fancybox: true,
      pjax: false,
      loading: {
        gif: '/images/theme/loading.gif',
        lottie: ''
      },
      lazyload: {
        enable: true,
        only_post: 'false',
        loading: {
          gif: '/images/theme/loading.gif',
          lottie: ''
        }
      },
      donate: {
        enable: false,
        alipay: '/images/donate/pay_alipay.jpg',
        wechat: '/images/donate/pay_wxpay.jpg',
        tencent: '/images/donate/pay_tencent.jpg'
      },
      galleries: {
        enable: true
      },
      fab: {
        enable: true,
        always_show: false
      },
      carrier: {
        enable: true
      },
      daovoice: {
        enable: false
      },
      preview: {
        background: {
          default: '',
          api: ''
        },
        motto: {
          default: '我在开了灯的床头下，想问问自己的心啊。',
          typing: true,
          api: 'https://v2.jinrishici.com/one.json',
          data_contents: '["data","content"]'
        },
      },
      qrcode: {
        enable: true,
        type: 'url',
        image: 'https://pic.izhaoo.com/weapp-code.jpg',
      },
      toc: {
        enable: true
      },
      scrollbar: {
        type: 'default'
      },
      notification: {
        enable: false,
        delay: 4500,
        list: '',
        page_white_list: '',
        page_black_list: ''
      },
      search: {
        enable: false,
        path: ''
      }
    }
  </script>

  

  

<meta name="generator" content="Hexo 6.2.0"></head>

<body class="lock-screen">
  <div class="loading" id="loading"></div>
  
    


  <nav class="navbar">
    <div class="left">
      
        <i class="iconfont iconhome j-navbar-back-home"></i>
      
      
        <i class="iconfont iconqrcode j-navbar-qrcode"></i>
      
      
        <i class="iconfont iconmoono" id="color-toggle" color-toggle="light"></i>
      
      
    </div>
    <div class="center">Nginx 难点攻克</div>
    <div class="right">
      <i class="iconfont iconmenu j-navbar-menu"></i>
    </div>
    
      <div id="qrcode-navbar"></div>
    
  </nav>

  
  

<nav class="menu">
  <div class="menu-container">
    <div class="menu-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <ul class="menu-content"><li class="menu-item">
        <a href="/ " class="underline "> 首页</a>
      </li><li class="menu-item">
        <a href="/galleries/ " class="underline "> 摄影</a>
      </li><li class="menu-item">
        <a href="/archives/ " class="underline "> 归档</a>
      </li><li class="menu-item">
        <a href="/tags/ " class="underline "> 标签</a>
      </li><li class="menu-item">
        <a href="/categories/ " class="underline "> 分类</a>
      </li><li class="menu-item">
        <a href="/about/ " class="underline "> 关于</a>
      </li></ul>
    
      <div class="menu-copyright"><p>Powered by <a target="_blank" href="https://github.com/scwang90">scwang90</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><a target="_blank" href="http://beian.miit.gov.cn/"><span>黔ICP备2021004317号-1</span></a><span>  |  </span><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img class="lazyload" data-original="/images/icons/icon-filing.png" src="https://www.beian.gov.cn/img/new/gongan.png"/> <span> 贵公网安备 52010202002539号</span></a></p></div>
    
  </div>
</nav>
  <main id="main">
  <div class="article-wrap">
    
      <div class="row container container-lg">
        <div class="col-xl-2"></div>
        <div class="col-xl-8"><article class="article">
  <div class="wrap">
    <section class="head">
  <img   class="lazyload" data-original="/images/theme/post-image.jpg" src=""  draggable="false">
  <div class="head-mask">
    <h1 class="head-title">Nginx 难点攻克</h1>
    <div class="head-info">
      <span class="post-info-item"><i class="iconfont iconcalendar"></i>五月 23, 2023</span>
      
      <span class="post-info-item"><i class="iconfont iconfont-size"></i>4226</span>
    </div>
  </div>
</section>
    <section class="main">
      <section class="content article-entry">
        
          
            <p>汇聚各个时间段，关于Nginx的一些难点问题，他们掌握之后又很容易忘记，全部汇总在这里</p>
          
        
        <h2 id="1-部署静态项目-前端-assetsPublicPath-与-后端-context-path-相同"><a href="#1-部署静态项目-前端-assetsPublicPath-与-后端-context-path-相同" class="headerlink" title="1. 部署静态项目- 前端 assetsPublicPath 与 后端 context-path 相同;"></a>1. 部署静态项目- 前端 assetsPublicPath 与 后端 context-path 相同;</h2><p><strong>配置思路</strong>：因为 Vue 项目打包之后 只有 static 和 index.html 两个顶级路由，所以只要把两个顶级路由配置给静态文件即可，其他的全部转发到后端。<br><strong>配置缺陷</strong>：前端只能以 Hash 路由访问，不支持 history 路由</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">server &#123;</span><br><span class="line">    listen      81;</span><br><span class="line"></span><br><span class="line">    # 解决静态404，重定向</span><br><span class="line">    location = /train-web/ &#123;</span><br><span class="line">        root             /usr/share/nginx/html/;</span><br><span class="line">        try_files  $uri  /train-web/index.html;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    # 配置 static 顶级路由</span><br><span class="line">    location /train-web/static/ &#123;</span><br><span class="line">        root             /usr/share/nginx/html/;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    # 配置 index.html 顶级路由</span><br><span class="line">    location /train-web/index.html &#123;</span><br><span class="line">        root             /usr/share/nginx/html/;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    # 其余请求全部转发后端</span><br><span class="line">    location /train-web/ &#123;</span><br><span class="line">        proxy_pass      http://192.168.2.99:8070/train-web/;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="2-配置反向代理-代理-PublicPath-与-被代理服务的-PublicPath-不一致时"><a href="#2-配置反向代理-代理-PublicPath-与-被代理服务的-PublicPath-不一致时" class="headerlink" title="2. 配置反向代理 - 代理 PublicPath 与 被代理服务的 PublicPath 不一致时"></a>2. 配置反向代理 - 代理 PublicPath 与 被代理服务的 PublicPath 不一致时</h2><p><strong>配置思路</strong>：不一致问题主要使用 rewrite 重写解决，但是内部js请求url 还是原来的 PublicPath 可以通过判断 $http_referer 做反响代理</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">location = /plex &#123;</span><br><span class="line">    rewrite ^/(.*)$ $1/ permanent;</span><br><span class="line">&#125;</span><br><span class="line">location = /plex/ &#123;</span><br><span class="line">    rewrite ^/(.*)$ index.html permanent;</span><br><span class="line">&#125;</span><br><span class="line">location ^~ /plex/ &#123;</span><br><span class="line">    rewrite ^/plex/(.+)$ /web/$1 break;</span><br><span class="line">        proxy_pass     http://127.0.0.1:32400;</span><br><span class="line">&#125;</span><br><span class="line">location ^~ /web/ &#123;</span><br><span class="line">    if ($http_referer ~ ^https?://.+?/plex/.+) &#123;</span><br><span class="line">        proxy_pass   http://127.0.0.1:32400;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="3-文件上传被nginx反向代理后，后端无法立即接收到请求，无法实时读取文件流"><a href="#3-文件上传被nginx反向代理后，后端无法立即接收到请求，无法实时读取文件流" class="headerlink" title="3. 文件上传被nginx反向代理后，后端无法立即接收到请求，无法实时读取文件流"></a>3. 文件上传被nginx反向代理后，后端无法立即接收到请求，无法实时读取文件流</h2><p><strong>问题说明</strong><br>浏览器上传文件到 springboot 后端项目时，在spring的过滤器中能立即接收到客户端的请求，然后从流中读取文件信息。但是如果经过nginx proxy_pass 反向代理后，浏览器上传文件经过了nginx的转发，这个时候spring的过滤器中不能立即接收到浏览器请求，需要等待客户端把文件全部发送完毕才能接收到请求。</p>
<p><strong>问题解决</strong><br>使用<code>proxy_request_buffering</code>和<code>proxy_buffering</code>指令来禁用或修改Nginx的缓冲行为。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">proxy_request_buffering off;</span><br><span class="line">proxy_buffering off;</span><br></pre></td></tr></table></figure>

<p>这将禁用Nginx对客户端请求和响应的缓冲，使得请求能够立即传递给后端的Spring Boot应用程序。这样，Spring的过滤器就能够立即接收到客户端的请求，并从流中读取文件信息。</p>
<h2 id="4-add-header-导致有两个-Content-Type-问题"><a href="#4-add-header-导致有两个-Content-Type-问题" class="headerlink" title="4. add_header 导致有两个 Content-Type 问题"></a>4. add_header 导致有两个 Content-Type 问题</h2><p><strong>问题说明</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">server &#123;</span><br><span class="line">    listen        80;</span><br><span class="line">    server_name   ip.scwang90.cn;</span><br><span class="line"></span><br><span class="line">    add_header Content-Type &quot;plain/text; charset=utf8&quot;;</span><br><span class="line">    return 200 $remote_addr;</span><br><span class="line">&#125;  </span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>上面的配置，在请求时返回结果有两个 Content-Type 如下：</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">root@lgs:~/projects/nginx<span class="comment"># curl -i http://ip.scwang90.cn/</span></span><br><span class="line">HTTP/1.1 200 OK</span><br><span class="line">Server: nginx/1.23.3</span><br><span class="line">Date: Mon, 15 Apr 2024 03:08:03 GMT</span><br><span class="line">Content-Type: application/octet-stream</span><br><span class="line">Content-Length: 12</span><br><span class="line">Connection: keep-alive</span><br><span class="line">Content-Type: plain/text; charset=utf8</span><br><span class="line"></span><br><span class="line">185.55.21.50</span><br><span class="line">root@lgs:~/projects/nginx<span class="comment"># </span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>可以看到，返回的 Header 中有两个 <code>Content-Type</code>:</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">Content-Type: application/octet-stream</span><br><span class="line">Content-Type: plain/text; charset=utf8</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>问题解决</strong></p>
<p>去除 add_header 使用 default_type 如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">server &#123;</span><br><span class="line">    listen        80;</span><br><span class="line">    server_name   ip.scwang90.cn;</span><br><span class="line"></span><br><span class="line">    default_type &#x27;text/plain; charset=utf-8&#x27;;</span><br><span class="line">    return 200 $remote_addr;</span><br><span class="line">&#125;  </span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>访问结果：</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">root@lgs:~/projects/nginx<span class="comment"># curl -i http://ip.scwang90.cn/</span></span><br><span class="line">HTTP/1.1 200 OK</span><br><span class="line">Server: nginx/1.23.3</span><br><span class="line">Date: Mon, 15 Apr 2024 03:28:22 GMT</span><br><span class="line">Content-Type: text/plain; charset=utf-8</span><br><span class="line">Content-Length: 12</span><br><span class="line">Connection: keep-alive</span><br><span class="line"></span><br><span class="line">185.55.21.50</span><br><span class="line">root@lgs:~/projects/nginx<span class="comment"># </span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>问题解决，default_type 告诉 Nginx，当需要为响应设置一个默认的 Content-Type 时，应该使用 text&#x2F;plain 类型，并带有 charset&#x3D;utf-8 的字符集。所以 Nginx 使用了 default_type 的值。</p>
<h2 id="5-vue-history模式-部署在服务器端的nginx配置-非根目录"><a href="#5-vue-history模式-部署在服务器端的nginx配置-非根目录" class="headerlink" title="5. vue history模式 部署在服务器端的nginx配置 (非根目录)"></a>5. vue history模式 部署在服务器端的nginx配置 (非根目录)</h2><p>vue history需要nginx或者其他方式配置一下才可正确访问，否则路由跳转之后刷新一下便会404 具体原因vue-router官网有说明，在此不多说</p>
<p>最近遇到的问题是上了一个小的项目，需要放在更深层次的目录下，上到测试环境 做了官网提到的nginx配置发现不行，之后查阅了一些博客资料，发现都没有一个特别好的方案。最终，我的解决方案如下</p>
<p>nginx配置如下</p>
<figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="section">server</span> &#123;</span><br><span class="line">    <span class="attribute">listen</span>       <span class="number">443</span> ;</span><br><span class="line">    <span class="attribute">server_name</span>  m;</span><br><span class="line">        </span><br><span class="line">    <span class="attribute">root</span>   html/mobile;</span><br><span class="line">    <span class="section">location</span> / &#123;</span><br><span class="line">        <span class="attribute">index</span>  index.html index.htm;</span><br><span class="line">        <span class="attribute">try_files</span> <span class="variable">$uri</span> <span class="variable">$uri</span>/ /auth/index.html;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>vue router 配置</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 路由配置</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">RouterConfig</span> = &#123;</span><br><span class="line">  <span class="attr">base</span>: <span class="string">&quot;/auth/&quot;</span>,</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;history&#x27;</span>,</span><br><span class="line">  <span class="attr">routes</span>: routers</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>该项目是用的vue-cli2 所以只需要修改config 里面的index.js的build部分</p>
<p>webpack 配置修改</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">build</span>: &#123;</span><br><span class="line">    <span class="comment">// Template for index.html</span></span><br><span class="line">    <span class="attr">index</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;../dist/auth/index.html&#x27;</span>),</span><br><span class="line">    <span class="comment">// Paths</span></span><br><span class="line">    <span class="attr">assetsRoot</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;../dist&#x27;</span>),</span><br><span class="line">    <span class="attr">assetsSubDirectory</span>: <span class="string">&#x27;auth/static&#x27;</span>,</span><br><span class="line">    <span class="attr">assetsPublicPath</span>: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * Source Maps</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="attr">productionSourceMap</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="attr">devtool</span>: <span class="string">&#x27;#source-map&#x27;</span>,</span><br><span class="line">    <span class="attr">productionGzip</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="attr">productionGzipExtensions</span>: [<span class="string">&#x27;js&#x27;</span>, <span class="string">&#x27;css&#x27;</span>],</span><br><span class="line">    <span class="attr">bundleAnalyzerReport</span>: process.<span class="property">env</span>.<span class="property">npm_config_report</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>最终项目地址为 m.xxx.com&#x2F;auth&#x2F;</p>
</blockquote>

      </section>
      <section class="extra">
        
          <ul class="copyright">
  
    <li><strong>本文作者：</strong>scwang90</li>
    <li><strong>本文链接：</strong><a href="https://blog.scwang90.cn/2023/05/23/breakthrough-nginx/index.html" title="https:&#x2F;&#x2F;blog.scwang90.cn&#x2F;2023&#x2F;05&#x2F;23&#x2F;breakthrough-nginx&#x2F;index.html">https:&#x2F;&#x2F;blog.scwang90.cn&#x2F;2023&#x2F;05&#x2F;23&#x2F;breakthrough-nginx&#x2F;index.html</a></li>
    <li><strong>版权声明：</strong>本分享所有文章均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" title="BY-NC-SA" target="_blank" rel="noopener">BY-NC-SA</a> 许可协议，转载请注明出处！</li>
  
</ul>
        
        
        
  <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/nginx/" rel="tag">nginx</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E4%B8%8A%E4%BC%A0/" rel="tag">上传</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E9%9A%BE%E7%82%B9%E6%94%BB%E5%85%8B/" rel="tag">难点攻克</a></li></ul> 

        
  <nav class="nav">
    <a href="/2023/07/07/nginx-variable/"><i class="iconfont iconleft"></i>Nginx 内部变量及其示例值一览</a>
    <a href="/2023/05/21/breakthrough-pandas/">Pandas 难点攻克<i class="iconfont iconright"></i></a>
  </nav>

      </section>
      
    </section>
  </div>
</article></div>
        <div class="col-xl-2">
          
            
  <aside class="toc-wrap">
    <h3 class="toc-title">文章目录：</h3>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%83%A8%E7%BD%B2%E9%9D%99%E6%80%81%E9%A1%B9%E7%9B%AE-%E5%89%8D%E7%AB%AF-assetsPublicPath-%E4%B8%8E-%E5%90%8E%E7%AB%AF-context-path-%E7%9B%B8%E5%90%8C"><span class="toc-text">1. 部署静态项目- 前端 assetsPublicPath 与 后端 context-path 相同;</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%85%8D%E7%BD%AE%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86-%E4%BB%A3%E7%90%86-PublicPath-%E4%B8%8E-%E8%A2%AB%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E7%9A%84-PublicPath-%E4%B8%8D%E4%B8%80%E8%87%B4%E6%97%B6"><span class="toc-text">2. 配置反向代理 - 代理 PublicPath 与 被代理服务的 PublicPath 不一致时</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E8%A2%ABnginx%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86%E5%90%8E%EF%BC%8C%E5%90%8E%E7%AB%AF%E6%97%A0%E6%B3%95%E7%AB%8B%E5%8D%B3%E6%8E%A5%E6%94%B6%E5%88%B0%E8%AF%B7%E6%B1%82%EF%BC%8C%E6%97%A0%E6%B3%95%E5%AE%9E%E6%97%B6%E8%AF%BB%E5%8F%96%E6%96%87%E4%BB%B6%E6%B5%81"><span class="toc-text">3. 文件上传被nginx反向代理后，后端无法立即接收到请求，无法实时读取文件流</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-add-header-%E5%AF%BC%E8%87%B4%E6%9C%89%E4%B8%A4%E4%B8%AA-Content-Type-%E9%97%AE%E9%A2%98"><span class="toc-text">4. add_header 导致有两个 Content-Type 问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-vue-history%E6%A8%A1%E5%BC%8F-%E9%83%A8%E7%BD%B2%E5%9C%A8%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E7%9A%84nginx%E9%85%8D%E7%BD%AE-%E9%9D%9E%E6%A0%B9%E7%9B%AE%E5%BD%95"><span class="toc-text">5. vue history模式 部署在服务器端的nginx配置 (非根目录)</span></a></li></ol>
  </aside>

          
        </div>
      </div>
    
  </div>
</main>
  

<footer class="footer">
  <div class="footer-social"><a 
        href="tencent://message/?Menu=yes&uin=283371828 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#12B7F5'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconQQ "></i>
      </a><a 
        href="javascript:; "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#09BB07'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconwechat-fill "></i>
      </a><a 
        href="https://github.com/scwang90 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#9f7be1'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  icongithub-fill "></i>
      </a><a 
        href="mailto:scwang90@hotmail.com "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color=#FF3B00" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconmail"></i>
      </a></div>
  
    <div class="footer-copyright"><p>Powered by <a target="_blank" href="https://github.com/scwang90">scwang90</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><a target="_blank" href="http://beian.miit.gov.cn/"><span>黔ICP备2021004317号-1</span></a><span>  |  </span><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img class="lazyload" data-original="/images/icons/icon-filing.png" src="https://www.beian.gov.cn/img/new/gongan.png"/> <span> 贵公网安备 52010202002539号</span></a></p></div>
  
</footer>
  
      <div class="fab fab-plus">
    <i class="iconfont iconplus"></i>
  </div>
  
  
  
  <div class="fab fab-up">
    <i class="iconfont iconcaret-up"></i>
  </div>
  
  
  
    
<script src="/js/color-mode.js"></script>

  
  
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>





  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>




  
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>






  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>




<script src="/js/utils.js"></script>
<script src="/js/script.js"></script>







  <script>
    (function () {
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>













</html>